<template>
  <van-tabbar v-model="active">
    <van-tabbar-item v-for="item in tabArr">
      <span>{{item.title}}</span>
      <img slot="icon" slot-scope="active" :src="active.active ? item.active : item.normal"/>
    </van-tabbar-item>
  </van-tabbar>
</template>


<script>
  import {Tabbar, TabbarItem} from 'vant';

  export default {
    data() {
      return {
        tabArr: [
          {
            id: '0',
            title: '直播',
            normal: require('../../assets/images/icon/01.png'),
            active: require('../../assets/images/icon/001.png')
          },
          {
            id: '1',
            title: '发现',
            normal: require('../../assets/images/icon/02.png'),
            active: require('../../assets/images/icon/002.png')
          },
          {
            id: '2',
            title: '社区',
            normal: require('../../assets/images/icon/03.png'),
            active: require('../../assets/images/icon/003.png')
          },
          {
            id: '3',
            title: '我的',
            normal: require('../../assets/images/icon/04.png'),
            active: require('../../assets/images/icon/004.png')
          },
        ],
        active: 0,
      }
    },
    watch: {
      active: function (curVal) {
        switch (curVal) {
          case 0:
            this.$router.push('/');
            break;
          case 1:
            this.$router.push('/find');
            break;
          case 2:
            this.$router.push('/community');
            break;
          case 3:
            this.$router.push('/user');
            break;
        }
      }
    },
  }
</script>

<style scoped>
  .van-tabbar {
    background-color: #f5f5fa !important;
  }
</style>

